<template>
    <div class="treeselect-container">
        <treeselect
            v-model="form.pid"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择上级菜单" />
    </div>
</template>

<script>
// import the component
import Treeselect from 'vue3-treeselect'
// import the styles
import 'vue3-treeselect/dist/vue3-treeselect.css'
//
export default {
    name: 'TreeselectComponent',
    components: {
        Treeselect
    },
    data(){
      return {
        form: {
          pid: null
        },
        menuOptions: [
          { id: 1, name: 'Menu 1', children: [] },
          { id: 2, name: 'Menu 2', children: [] },
          { id: 3, name: 'Menu 3', children: [] }
        ]
      };
    },
    methods:{
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id ? node.id : 0,
        label: node.name ? node.name : '主目录',
        children: node.children
      };
    }
  }
};
</script>